<template name="Scroller">
	<scroll-view class="Scroller" scroll-y="true" :lower-threshold="10" @scrolltolower="GetList" @scroll="scroll"
		:scroll-top="scrollTop">
		<slot></slot>
		<view class="info" v-if="status==1">正在加载…</view>
		<view class="info" v-if="status==2">- 下拉加载更多 -</view>
		<view class="info" v-if="!empty&&status==3">- 没有更多 -</view>
		<!-- <u-loadmore status="loading" v-if="status==1" />
		<u-loadmore v-if="status==2" />
		<u-loadmore status="nomore" v-if="!empty&&status==3" /> -->
		<view class="empty" v-if="empty&&(status==0||status==3)">
			<u-empty :mode="mode" iconSize="40"></u-empty>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			status: {
				type: Number,
				default: 0, //0初始状态，1正在加载，2加载完毕（还有更多）3加载完毕（没有更多）
			},
			empty: Boolean, //是否为空
			emptylabel: { //为空时的提醒文字
				type: String,
				default: '没有任何数据'
			},
			auto: Boolean,
			mode: {
				type: String,
				default: 'list'
			}
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
			}
		},
		mounted() {
			if (this.auto) {
				this.GetList()
			}
		},
		methods: {
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			GetList() { //触发获取数据
				if (this.status == 0 || this.status == 2) {
					this.$emit('load')
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.Scroller {
		position: relative;
		height: 100%;
		width: 100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch;

		.info {
			height: 10vw;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #aaa;
			font-size: 3vw;
		}

		.empty {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 20vw;

			.img {
				width: 30vw;
				height: 34vw;
			}

			.label {
				color: #333333;
				font-size: 5vw;
			}

		}
	}
</style>